<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米轮播图</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.box{
				position:relative;
				width:1226px;
				height:460px;
				background:url(img/1.webp) no-repeat center/100% 100%;
				margin:auto;
				animation:img 10s infinite linear;
				}
			.box .box1{
				position:absolute;
				right:20px;
				bottom:20px;
				width:120px;
				height:40px;
				/* background-color:pink; */
			}
			.box .box1 a{
				display:inline-block;
				width:14px;
				height:14px;
				border:2px solid #c0c0c0;
				border-radius:14px;
				margin-right:10px;
			}
			@keyframes img{
				0%,30%{
					background-image:url(img/1.webp);
				}
				40%,60%{
					background-image:url(img/2.webp);
				}
				70%,90%{
					background-image:url(img/3.webp);
				}
			}
			@keyframes do1{
				0%,30%{
					background-color:#ffffff;
				}
				40%,90%{
					background-color:rgba(0,0,0,0);
				}
			}
			.do1{
				animation:do1 10s linear infinite;
			}
			@keyframes do2{
				0%,30%{
					background-color:rgba(0,0,0,0);
				}
				40%,60%{
					background-color:#ffffff;
				}
				70%,90%{
					background-color:rgba(0,0,0,0);
				}
			}
			.do2{
				animation:do2 10s linear infinite;
				}
			@keyframes do3{
				0%,30%{
					background-color:rgba(0,0,0,0);
				}
				40%,60%{
					background-color:rgba(0,0,0,0);
				}
				70%,90%{
					background-color:#ffffff;
				}
			}
			.do3{
				animation:do3 10s linear infinite;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				<a href="#" class="do1"></a>
				<a href="#" class="do2"></a>
				<a href="#" class="do3"></a>
			</div>
		</div>
	</body>
</html>
